<script setup>
import { ref, toRefs, reactive, computed, onBeforeMount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import CreateOrEditFrame from '../components/CreateOrEditFrame.vue';
import { listHandler } from '../../api/Generic'
import { deleteTableRow, object2List, list2Object  } from '../../utils/utils';
import Table from '../components/Table.vue';
import DialogYaml from '../components/DialogYaml.vue'
import { obj2Yaml } from '../../utils/utils';
import { createOrUpdateByYamlHandler as createHandler } from '../../api/tools.js'
import { useRouter } from 'vue-router'
import CodeMirror from '../components/CodeMirror.vue';
const router = useRouter()

const data = reactive({
  clusterId: '',
  options: {
    method: "Create"
  }
})

const yamlContent = ref('')


const submitRollback = (msg) => {
  ElMessageBox.confirm(
    msg,
    '执行结果',
    {
      confirmButtonText: '查看列表',
      cancelButtonText: '返回',
      type: 'success',
      draggable: true
    }
  ).then(() => {
    router.replace({
      path: '/pv/list',// 跳转pv列表页
      query: {
        clusterId: data.clusterId,
        namespace: data.namespace
      }
    })
  }).catch(() => {
    return
  })
}

const submitHandler = (tag) => {
  data.item.metadata.labels = list2Object(data.options.labelList)
  data.item.metadata.annotations = list2Object(data.options.annotationList)

  if(tag == 'yaml') { // json转yaml
    const yamlData = obj2Yaml(data.item)
    yamlContent.value = yamlData
    showDetail.value = true
  } else {
    const postData = {
      clusterId: data.clusterId,
      item: data.item
    }
    if (props.method != 'Update') {
      createHandler(postData).then((response) => {
        submitRollback(response.data.message)
      })
    } else {
      updateHandler(postData).then((response) => {
        console.log(props.method)
        submitRollback(response.data.message)
      })
    }
  }
}
 
const submit = () => {
  console.log('yaml', yamlContent)
  if (yamlContent.value == '') {
    ElMessage.error("请输入yaml数据")
    return
  }else {
    // 创建资源或更新资源
    const postData = {
      clusterId: data.clusterId,
      yaml: yamlContent.value,
      method: data.options.method
    }
    createHandler(postData).then((res) => {
      ElMessageBox.confirm(
        res.data.message.replace("\n","<br/>"),
        '提交成功',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'success',
          showCancelButton: false, // 关闭取消按钮
          draggable: true, // 支持拖拽
          dangerouslyUseHTMLString: true // 支持HTML字符串
        }
      ).then(() => {
        return
      }).catch(() => {
        return
      })
    })
  }
}

const rollback = (clusterId) => {
  console.log('clusterId：', clusterId)
  data.clusterId = clusterId
}

onBeforeMount(() => {

})

const { options, clusterId } = toRefs(data)
</script>

<template>
  <CreateOrEditFrame
  :show-namespace="false"
  @clusterChangedRollback="rollback"
  >
    <template #header>
      <el-switch size='large' v-model="options.method" inline-prompt active-text="存在即更新" inactive-text="仅创建"
      active-value="Apply" inactive-value="Create"
      style="margin-left: 20px;--el-switch-on-color: red;--el-switch-off-color: green;"></el-switch>
    </template>
    <template #main>
      <div>
        <CodeMirror
      v-model="yamlContent"
      height="480px"></CodeMirror>
      </div>
      <div style="margin-top: 10px;">
        <el-button type="primary" @click="submit()">提交</el-button>
      </div>
    </template>
  </CreateOrEditFrame>
</template>

<style scoped>

</style>
